import React from 'react'
import ImagePreview from '../ImagePreview'
import VideoPlayer from '../VideoPlayer'
import Markdown from '../Markdown'
import {
    PhoneOutlined,
    VideoCameraOutlined,
    DesktopOutlined
} from '@ant-design/icons'
import { formatFileSize } from '@/hooks/useFormatFileSize'
import style from './index.module.scss'

const RenderMessageType: React.FC<{ type: number, message: any }> = (props) => {
    const { type, message } = props
    if (type === 0) {
        // 消息类型 0: 文本消息(包含emoji, 单个emoji会呈现大图)
        return <div className={style.messageText}>
            <div dangerouslySetInnerHTML={{ __html: message }}></div>
        </div>
    } else if (type === 1) {
        // 消息类型 1: 图片消息
        return <div className={style.messageImg}>
            <ImagePreview url={message} />
        </div>
    } else if (type === 2) {
        // 消息类型 2: 视频消息
        return <div className={style.messageVideo}>
            <VideoPlayer url={message} />
        </div>
    } else if (type === 3) {
        // 消息类型 3: 文件消息
        // 支持的文件类型
        const supportFileType = ['apk', 'cad', 'css', 'dmg', 'docx', 'doc', 'exe', 'gif', 'gitignore', 'html', 'ipa', 'iso', 'java', 'js', 'json', 'jsx', 'less', 'md', 'mp3', 'mp4', 'mov', 'pdf', 'ppt', 'psd', 'py', 'scss', 'sql', 'styles', 'svg', 'ts', 'txt', 'vue', 'xlxs', 'zip']
        let fileType = supportFileType.find(i => i === JSON.parse(message).fileSuffixName) ? JSON.parse(message).fileSuffixName : 'other'

        return <div className={style.messageFile}>
            <img
                width="40" height="40"
                src={`/images/files/${fileType}.svg`}
                alt=""
            />
            <div className={style.messageFileInfo}>
                <div className={style.messageFileName}>{JSON.parse(message)?.fileName}</div>
                <div className={style.messageFileSize}>{formatFileSize(JSON.parse(message).size)}</div>
            </div>
        </div>
    } else if (type === 4) {
        // 消息类型 4: 单个emoji(变成大的emoji)
        return <div className={style.messageEmoji}>
            <div dangerouslySetInnerHTML={{ __html: message }}></div>
        </div>
    } else if (type === 5) {
        // 消息类型 5: markdown预览
        return <div className={style.messageMd}>
            <Markdown content={message} />
        </div>
    } else if (type === 6 || type === 7 || type === 8) {
        // 消息类型 6: 语音通话
        // 消息类型 7: 视频通话
        // 消息类型 8: 屏幕共享
        return <div className={style.messageTelephone}>
            {
                type === 6 ? <PhoneOutlined /> : type === 7 ? <VideoCameraOutlined /> : <DesktopOutlined />
            }
            <span>{type === 6 ? '语音通话' : type === 7 ? '视频通话' : '屏幕共享'}</span>
        </div>
    } else {
        // 其他
        return <div className={style.error}>该消息暂不可查看</div>
    }
}

export default RenderMessageType